<template>
  <div class="wrapper-contion">
<div class="wrapper"></div>
<div class="wrapper-white">
  <span class="top-Title">您的企业是否面临这样的困扰？</span>
  <div class="wrapper-white-view">
    <div v-for="(item,index) in TopArr" :key="index" class="wow fadeInUp" 
     data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
      <div class="wrapper-backView">
        <div class="wrapper-white-url">
          <van-image width="100%" height="100%" fit="cover" :src="item.url" />
        </div>
        <div class="wrapper-white-txt">{{item.text}}</div>
      </div>
    </div>
  </div>
</div>
<div class="object-white">
  <span class="top-Title object-title">可视化系统—将需管理的对象<br/>一目了然地呈现</span>
  <span class="object-sub">可视化管理系统是利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。</span>
  <div scroll-x="true" style="width: 100%;overflow-x: auto">
    <div class="object-view-item">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/b59329f90bea3201b9313e48e07eaa0f.png" />
    </div>
  </div>
</div>
<div class="scene-wrapper">
  <span class="top-Title object-title">首批应用场景</span>
  <span class="object-sub scene-sub">生产进度实时更新 | 设备异常报警 | 车间管理透明化 这些，数智纺可视化解决方案助您轻松实现</span>
  <div class="scene-white-view">
    <!-- data-wow-duration="0.4s" :data-wow-delay="index/3" -->
    <div v-for="(item,index) in sceneArr" :key="index" class="wow fadeInUp">
      <div class="scene-backView" >
        <div class="wrapper-white-url">
          <van-image width="100%" height="100%" fit="cover" :src="item.url" />
        </div>
        <span class="scene-txt">{{item.txt}}</span>
        <span class="scene-white-sub">{{item.sub}}</span>
      </div>
    </div>
  </div>
  <div class="scene-img">
    <van-image width="100%" height="100%" fit="cover" src="https://oss.cloudcpc.com/b3219c90e976313085ff894af7383c7b.png" />
  </div>
  <span class="top-Title object-title">打通数据生命周期各环节</span>
  <span class="object-sub period-sub">从数据源接入，到数据采集、数据处理，再到数据<br/>分析和挖掘，打通数据生命周期的各个环节，<br/>实现数据填报、处理、分析一体化，提供一站式数据服务 <br/>既能支持对分析表进行数据回填设置，又能完成数据融合 <br/>提升数据质量，服务数据分析。</span>
  <div scroll-x="true" style="width: 100%;overflow-x: auto">
    <div class="period-view-item">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/0d4e6ce6ed3a3c32a7e8079aa5c52c59.png" />
    </div>
  </div>
  <span class="top-Title period-title">丰富呈现 一屏尽览</span>
  <span class="object-sub period-sub">通过生产车间挂壁以及生产管理者的办公室安装了LED<br/>可视化看板后，系统可以实时<br/>展示刷新车间设备的生产数据信息</span>
  <div class="period-com-view">
    <div class="period-midd-img">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/fef89a867b4236de9393150f9da97a1e.png" />
    </div>
    </div>
</div>
<div class="department-wrapper">
  <span class="top-Title department-title">支持将不同平台系统数据、不同业务部门数据<br/>结合贯通，综合汇集于系统之上</span>
  <span class="object-sub period-sub">包括实时设备运行状态、原料库存信息、纺织工艺、<br/>实时生产数据，实时产量数据以及环境温湿度等等。</span>
  <div class="department-view">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/756ac69c2baa3ef3ad290e69a099f40a.png" />
  </div>
  <div class="department-img1">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/242881dd96eb3edcb13ab234aa3d0fff.png" />
  </div>
  <div class="department-img2">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/873ba64e2ab2338ba4ab270511d9f0f7.png" />
  </div>
  <div class="department-img3">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/929a59c6316d34aeb25f8dd77a5ee8a6.png" />
  </div>
  <div class="department-img4">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/e0a742a1981f3302bbb5268a1da0d0ff.png" />
  </div>
  <div class="department-img5">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/9d40aed34ad138309c53d37bba40ba86.png" />
  </div>
  <div class="department-img6">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/f0601a2577403e478f0717016df089d9.png" />
  </div>
  <span class="top-Title department-title">提供丰富的图表呈现方式</span>
  <span class="object-sub department-sub">包括表格、散点图、折线图、柱状图、饼图、产线图、<br/>关系图等，简单直观</span>
  <div class="department-down-img">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/394b2aa34caa353da98f479d258de1d1.png" />
  </div>
</div>
<div class="terminal-wrapper"> 
  <span class="top-Title terminal-title">多终端展示 全面高效管理</span>
  <div class="terminal-down-img">
    <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/7952da86ad123ca0902e6b54146dfa03.png" />
  </div> 
  <div  class="terminal-scroll" scroll-x="true" style="width: 100%;overflow-x: auto">
    <div class="terminal-view-item">
      <div class="terminal-white">
        <div class="terminal-back">  
          <div class="terminal-top-img">
            <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/4cb94602154f3f039e0f66cf4250e3c5.png" />
          </div>
          <span class="terminal-top-txt">采用平板电脑、触控屏幕作为控制终端，来实现对大屏显示布局、系统模式的切换以及界面内容的交互控制
          </span>
      </div>
      <div class="terminal-back">  
          <div class="terminal-top-img">
            <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/b0d284bfab993fb987e01d38f0fb777f.png" />
          </div>
          <span class="terminal-top-txt">可视化管理能让企业的流程更加直观，使企业内部的信息实现可视化，并能分析预测，从而实现管理的高效透明化
          </span>
      </div>
      <div class="terminal-back">  
          <div class="terminal-top-img">
            <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/5722c287353a3e859d65cdc88a974475.png" />
          </div>
          <span class="terminal-top-txt">管理效果可以渗透到企业管理层、原料供应、车间生产、能耗管理等各个环节
          </span>
      </div>
      </div>
    </div>
  </div>
</div>
<div class="value-wrapper">
  <span class="top-Title value-title">产品价值</span>

  <div class="value-img">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/68a8da5b6a913530afec37aaa697b124.png" />
  </div>
  <div class="value-url">
       <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/c97ef8b4f1063f648ecfe82b54920499.png" />
  </div>
</div>
<div class="feature-wrapper">
  <span class="top-Title">四大特色</span>
  <div  v-for="(item,index) in feature" :key="index" class="wow fadeInRight" 
  data-wow-duration="0.4s" :data-wow-delay="0.2+index/10+'s'">
    <div class="feature-list" >
      <div class="feature-left">
        <van-image width="100%" height="100%" fit="cover"
        :src="item.url" />
      </div>
      <div class="feature-right">
        <div class="feature-right-txt">{{item.tet}}</div>
        <span class="feature-right-sub">{{item.sub}}</span>
      </div>
    </div>
  </div>
</div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
   TopArr:[
      {
        url:'https://oss.cloudcpc.com/e1b2cc700e523b6ba1a4bf42bde81ae1.png',
        text:'产量能耗不能\n及时知晓！',
      },
      {
        url:'https://oss.cloudcpc.com/74b3d763a7c837be8f153084f3c03bf7.png',
        text:'设备运行状态\n不清楚！',
      },
      {
        url:'https://oss.cloudcpc.com/c1d233fb90ef36e3bc28a7d9833b853f.png',
        text:'车间管理一团\n乱！',
      },
      {
        url:'https://oss.cloudcpc.com/8fa520773773303882d71f0926eca095.png',
        text:'异常预警难！',
      } 
    ],
    sceneArr:[{
      url:'https://oss.cloudcpc.com/9c72dd335e663affa89981b6cef18cb4.png',
      txt:'车间生产可视化',
      sub: '运用3D高仿真立体建模\n技术，建立定制化的生产可\n视化运营模型。',
    },
    {
      url:'https://oss.cloudcpc.com/051f56f8a6583d3c84f41ca292497e4f.png',
      txt:'加工过程可视化',
      sub: '结合数据算法，通过模型演\n示，使加工过程可视化。',
    },
    {
      url:'https://oss.cloudcpc.com/aa7a2dc0e3c43e5fb8b33dbbdece67b4.png',
      txt:'3D设备动画展示',
      sub: '通过三维动画，对产品内部\n结构、工作原理进行\n拆分解释演示。',
    },
    {
      url:'https://oss.cloudcpc.com/83b7b875ec1538e2b1a9549c986e2e98.png',
      txt:'设备状态可视化',
      sub: '对设备运营和操作人员实\n时状态集中监管。',
    }
    ],
    feature:[
      {
        url:'https://oss.cloudcpc.com/f789a1705999387ca431ef231e842e6e.png',
        tet:'移动化',
        sub:'关键数据尽在“掌”握；异常数据实时报警\n公司会议、行业展会、出差途中、上班路上',
      }, 
      {
        url:'https://oss.cloudcpc.com/1d4c3262a0a33f2e90761e1d5b89bcd1.png',
        tet:'三“低”',
        sub:'低成本：80%标准化，可视化成本降低80%\n低门槛：无需编写代码，人人能懂会用\n低起点：对企业信息化程度无要求',
      },
      {
        url:'https://oss.cloudcpc.com/6ce645c73df73370bc5c2a71345163ae.png',
        tet:'数据安全',
        sub:'私有化部署，企业数据不外泄\n角色化权限，核心数据活体识别访问',
      },
      {
        url:'https://oss.cloudcpc.com/de95d6a56a023651a4fb0667dcdebd28.png',
        tet:'一站式解决方案',
        sub:'提供数据采集方案\n铺设AITO设备采集设备数据',
      },

    ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
  },

  methods: {
      chooseTxt(e){
          console.log(e)
            this.index = e
            },

  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>


